<template>
  <div class="lift-system">
    <h1>电梯系统</h1>
    <div class="card-container">
      <t-card class="system-card" :hover-shadow="true" @click="goToIotDevices">
        <template #cover>
          <div class="card-icon">
            <t-icon name="internet" size="48px" />
          </div>
        </template>
        <template #title>
          物联设备
        </template>
        <template #description>
          查看和管理电梯物联网设备
        </template>
      </t-card>
      
      <t-card class="system-card" :hover-shadow="true" @click="goToRealTimeStatus">
        <template #cover>
          <div class="card-icon">
            <t-icon name="chart-bubble" size="48px" />
          </div>
        </template>
        <template #title>
          电梯实时状态
        </template>
        <template #description>
          监控电梯运行实时状态
        </template>
      </t-card>
      
      <t-card class="system-card" :hover-shadow="true" @click="goToFaultMonitoring">
        <template #cover>
          <div class="card-icon">
            <t-icon name="error-circle" size="48px" />
          </div>
        </template>
        <template #title>
          电梯故障监测
        </template>
        <template #description>
          监测电梯故障和预警信息
        </template>
      </t-card>
      
      <t-card class="system-card" :hover-shadow="true" @click="goToAbnormalDetails">
        <template #cover>
          <div class="card-icon">
            <t-icon name="file-excel" size="48px" />
          </div>
        </template>
        <template #title>
          电梯异常详情
        </template>
        <template #description>
          查看电梯异常详细信息
        </template>
      </t-card>
      
      <t-card class="system-card" :hover-shadow="true" @click="goToMaintenance">
        <template #cover>
          <div class="card-icon">
            <t-icon name="tools" size="48px" />
          </div>
        </template>
        <template #title>
          维保管理
        </template>
        <template #description>
          管理电梯维修保养信息
        </template>
      </t-card>
      
      <t-card class="system-card" :hover-shadow="true" @click="goToAnnualInspection">
        <template #cover>
          <div class="card-icon">
            <t-icon name="check-circle" size="48px" />
          </div>
        </template>
        <template #title>
          年检管理
        </template>
        <template #description>
          管理电梯年度检查信息
        </template>
      </t-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToIotDevices = () => {
  router.push('/lift/iot-devices');
};

const goToRealTimeStatus = () => {
  router.push('/lift/real-time-status');
};

const goToFaultMonitoring = () => {
  router.push('/lift/fault-monitoring');
};

const goToAbnormalDetails = () => {
  router.push('/lift/abnormal-details');
};

const goToMaintenance = () => {
  router.push('/lift/maintenance');
};

const goToAnnualInspection = () => {
  router.push('/lift/annual-inspection');
};
</script>

<style scoped>
.lift-system {
  padding: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.system-card {
  width: 300px;
  cursor: pointer;
  transition: all 0.3s;
}

.system-card:hover {
  transform: translateY(-5px);
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background-color: #f5f5f5;
}
</style> 